<template>
	<view class="index-container">
		<view class="index-bg">
		</view>
		<view style="margin: -180rpx 30rpx;">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
				<block v-for="(item,index) in list1" :key="index">
					<swiper-item class="swiper-item">
						<image class="banner-image" :src="item" mode="widthFix"></image>
						<!-- <view style="background-color: red;width: 706rpx;height: 280rpx;"></view> -->
					</swiper-item>
				</block>

			</swiper>
			<view class="w-100">
				<block v-for="(item,index) in menuList" :key="index">
					<view @click="handleJump(item.path)" class="d-inline-block">
						<image class="menu-icon" :src="item.image" mode="widthFix"></image>
						<view class="menu-title">{{item.title}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					require('@/static/images/index/banner1.png')
				],
				menuList: [{
					image: require('@/static/images/index/menu-icon1.png'),
					title: '遗嘱登记',
					path: '/pages/index/select/index?type=0'
				}, {
					image: require('@/static/images/index/menu-icon2.png'),
					title: '遗嘱查询',
					path: '/pages/index/select/index?type=1'
				}, {
					image: require('@/static/images/index/menu-icon3.png'),
					title: '自书遗嘱',
					url: ''
				}, {
					image: require('@/static/images/index/menu-icon4.png'),
					title: '代书遗嘱',
					url: ''
				}, {
					image: require('@/static/images/index/menu-icon5.png'),
					title: '遗嘱信托',
					url: ''
				}, {
					image: require('@/static/images/index/menu-icon6.png'),
					title: '遗嘱咨询',
					path: '/pages/index/service'
				}, {
					image: require('@/static/images/index/menu-icon7.png'),
					title: '调解诉讼',
					url: ''
				}, {
					image: require('@/static/images/index/menu-icon8.png'),
					title: '典型案例',
				}, {
					image: require('@/static/images/index/menu-icon9.png'),
					title: '法律法规',
				}, {
					image: require('@/static/images/index/menu-icon10.png'),
					title: '联系我们',
					path: '/pages/index/contactUs'
				}, {
					image: require('@/static/images/index/menu-icon11.png'),
					title: '关于遗嘱库',
					url: ''
				}]
			}
		},
		onLoad() {

		},
		methods: {
			handleJump(path) { //页面跳转
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		line-height: 1;

		.index-bg {
			width: 750rpx;
			height: 398rpx;
			background: url('@/static/images/index/index-bg.png') no-repeat;
			background-size: 100% 100%;
			position: relative;

		}

		.swiper {
			width: 706rpx !important;
			height: 280rpx !important;

			.swiper-item {
				width: 706rpx !important;
				height: 280rpx !important;

			}

			.banner-image {
				width: 706rpx;
				height: 280rpx;
			}
		}

		.w-100 {
			.d-inline-block {
				width: 25%;
				margin-top: 45rpx;
			}

			.menu-icon {
				width: 82rpx;
				height: 82rpx;
				margin: 0 auto;
				display: block;
			}

			.menu-title {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				margin-top: 22rpx;
				text-align: center;
			}
		}
	}
</style>
